<template>
  <div class="bg-white !h-screen">
    <ATable
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      bordered
      class="main-table"
      size="large"
      sticky
      @change="handleTableChange"
      :loading="loading"
      :scroll="scroll"
    >
      <template v-if="namespace !== 'NULL'" #action="{ record }">
        <span v-if="checkPowerByName(detailPermission)" class="flex justify-center">
          <a class="font-bold" @click="handleView(record)"> <ExclamationCircleOutlined /></a>
        </span>
      </template>
    </ATable>
    <SysEchartsDrawer ref="sysDrawerRef"></SysEchartsDrawer>
    <PaasEchartsDrawer ref="paasDrawerRef"></PaasEchartsDrawer>
  </div>
</template>

<script lang="ts">
/* eslint-disable*/
import { computed, defineComponent, onMounted, ref, toRefs } from 'vue';
import { Divider, Table } from 'ant-design-vue';
// import { usePagination } from "vue-request";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import SysEchartsDrawer from '/@/views/maintenance-center/resource-monitor/for-platform/components/sysChartsDrawer.vue';
import PaasEchartsDrawer from '/@/views/maintenance-center/resource-monitor/for-platform/components/paasChartsDrawer.vue';
// import { TableProps } from "ant-design-vue/es/table/interface.vue";
import { getTableList } from '/@/api/maintenance-center/resource-monitor/for-platform/resourceMonitor';
import { TableProps } from 'ant-design-vue/lib/vc-table/Table';
import { checkPowerByName } from '../../../../../utils/permission';

export default defineComponent({
  components: {
    SysEchartsDrawer,
    PaasEchartsDrawer,
    ATable: Table,
    ExclamationCircleOutlined,
    Divider,
  },

  props: {
    tableColumns: Array,
    nameSpace: String,
  },
  setup(prop) {
    const scroll = ref<undefined | Object>({ x: 'max-content' });
    const loading = ref(false);
    const columns = computed(() => prop.tableColumns);
    const dataSource = ref([]);
    const namespace = prop.nameSpace;
    const detailPermission = computed(() => {
      let permissionName;
      switch (prop.nameSpace) {
        case 'PAAS.AGGR':
          permissionName = 'cceDetail';
          break;
        case 'SYS.RDS':
          permissionName = 'rdsDetail';
          break;
        case 'SYS.DCS':
          permissionName = 'dcsDetail';
          break;
        case 'NULL':
          permissionName = 'cseDetail';
          break;
      }
      return permissionName;
    });
    let current = ref(1);
    let size = ref(10);
    const total = ref(0);
    const paasDrawerRef = ref(null);
    const sysDrawerRef = ref(null);
    const pagination = computed(() => ({
      showSizeChanger: true,

      total: total.value,
      current: current.value,
      size: size.value,
      showTotal: (total) => {
        return `共 ${total} 条`;
      },
    }));

    const getDataList = async () => {
      try {
        loading.value = true;
        const res = await getTableList({
          current: pagination.value.current,
          size: pagination.value.size,
          nameSpace: namespace,
        });
        dataSource.value = res.items;
        total.value = res.total;
      } finally {
        loading.value = false;
      }
    };

    getDataList();

    const handleTableChange: TableProps['onChange'] = (pag) => {
      pagination.value.current = pag.current;
      pagination.value.size = pag.pageSize;
      if (Number(pagination.value.size) > 10) {
        scroll.value = { x: 'max-content', y: 500 };
      }
      getTableList({
        current: pagination.value.current,
        size: pagination.value.size,
        nameSpace: namespace,
      }).then((res) => {
        dataSource.value = res.items;
        total.value = res.total;
        current.value = pag.current;
        size.value = pag.pageSize;
      });
    };

    function handleView(record: Recordable) {
      if (prop.nameSpace === 'PAAS.AGGR') {
        paasDrawerRef.value.showDrawer({
          namespace: prop.nameSpace,
          dimensionValue: record.clusterId,
        });
      } else {
        sysDrawerRef.value.showDrawer({
          namespace: prop.nameSpace,
          dimensionValue: record.instanceId,
        });
      }
    }

    return {
      dataSource,
      scroll,
      loading,
      pagination,
      sysDrawerRef,
      paasDrawerRef,
      handleView,
      columns,
      namespace,
      handleTableChange,
      total,
      detailPermission,
      checkPowerByName,
    };
  },
});
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
</style>
